﻿
body { font:13px serif; *font-size:small; *font:x-small; line-height:1.22; }
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section,
time, mark, audio, video, a {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent none no-repeat 0 0;
  color: #484848;
  font-weight: normal;
}

article, aside, figure, footer, header, hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }

del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0;  font-size:inherit; font:100%;}
input, select { vertical-align:middle;  font:99% sans-serif; color: #282828;}
pre, code, kbd, samp { font-family: monospace, sans-serif; } 
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }
html { -webkit-font-smoothing: antialiased; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a: active { outline: none; }
a:focus { outline: 1px dotted #f3f3f3; }
ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

small { font-size:85%; }
strong{ font-weight: bold; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
::-moz-selection{ background: #484848; color:#fff; text-shadow: none; }
::selection { background:#484848; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #ccc; } 
html { overflow-y: scroll; }
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

/* RESET STYLES END HERE */

/* @font-face code Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'LeagueGothic';
    src: url('League_Gothic-webfont.eot');
    src: url('League_Gothic-webfont.eot?#iefix') format('eot'),
         url('League_Gothic-webfont.woff') format('woff'),
         url('League_Gothic-webfont.ttf') format('truetype'),
         url('League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AcknowledgementMedium';
    src: url('Acknowledgement-webfont.eot');
    src: url('Acknowledgement-webfont.eot?#iefix') format('eot'),
         url('Acknowledgement-webfont.woff') format('woff'),
         url('Acknowledgement-webfont.ttf') format('truetype'),
         url('Acknowledgement-webfont.svg#webfontuCYqM11k') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
  background: transparent url(bg-main.gif) repeat 0 0;	
  height: 100%;
}

body {
  width: 758px;
  margin: 6px auto 0 auto;
  border-top: solid 1px #8e8e8e;
  background: transparent url(bg-texture.png) no-repeat top center;
  height: 100%;
  color: #666666;
  font-size: 13px;
  position: relative;
  font-family: Times, "Times New Roman", serif;
}


h1 {
  text-shadow: #fff 1px 1px;
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  text-transform: uppercase;
  line-height: 1;
}

h2 {
  background-position: top center;
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  padding: 7px 0 0 0;
}
article h2 {
  background-image: url(bg-header.gif);
}
body > header h2 { 
  text-transform: lowercase;
  background-image: none;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: none;
  font-weight: normal;
  line-height: 2;
}
p {
  margin: 0 0 13px 0;
  text-align: justify;
  line-height: 1em;
}


/* HEADER */
body > header {
  border-top:  solid 1px #8e8e8e;
  border-bottom: solid 1px #8e8e8e;
  margin: 1px auto;
  padding-top: 8px;
  overflow: hidden;
  position: relative;
}

header a {
  text-decoration: none;
  color: #484848;
}
header a img {
  position: relative;
  top: 8px;
}

header hgroup {
  text-align: center;
  margin-left: 30px;
}

header h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 60px;
  position: relative;
}

header h1 span {
  position: absolute;
  left: 40px;
  top: 40%;
  font-size: 30%;
}

header p {
  position: absolute;
  bottom: 0;
  line-height: 25px;
  font-size: 12px;
  margin: 0;
}

#issue {
  right: 0;
  text-align: right;
}

nav {
  border-top: double 3px #8e8e8e;
  height: 28px;
}

nav ul {
  margin: 1px auto;
  height: 28px;
  white-space: nowrap;
  text-align: center;
  width: 10.2em;
  
}

nav ul li {
  width: 5em;
  float: left;
}

nav ul li a{ 
  color: #484848;
  text-transform: uppercase;
  font-size: 5px;
  display: block;
  line-height: 27px;
  text-decoration: none;
}

nav ul li a:hover, nav ul li a:active {
  text-decoration: underline;	
  font-size:13px;
}

#main {
  margin: 1px 0 0 0;
  border-top: solid 1px #8e8e8e;
  padding: 15px 0;
  clear: both;
}
#main > div {
  float: left;
}
#main > div:first-of-type, /* both selectors target the same element */
#primary   {
  width: 375px;	
  padding-right: 4px;
}

#primary {
  width: 375px;
}

#main > div:nth-of-type(2), /* both selectors target the same element */
#secondary {
  width: 130px;	
}

#secondary {
  width: 130px;
}

#main > div:last-of-type, /* both selectors target the same element */
#tertiary,
aside {
  width: 244px;
  margin-right:0;
  padding-left: 4px;
}

#tertiary,
aside {
  width: 244px;
  margin-right:0;
  padding-left: 4px;
}
/* The first article */

#primary article .content {
  -webkit-columns: 3 9em;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-width: 9em;
  -moz-column-gap: 10px;
  column-count: 3;
  column-width: 9em;
  column-gap: 10px; 

}

#primary article .content h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
}

#video {
  display: block;
  margin-bottom: 12px;
}

#video, 
#primary article h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  clear:both;
}


#canvasOverlay
{
	position:absolute;
	top:0px;
	left:0px;
	/* to avoid seeing the video in color for a second before the JavaScript runs 
	 * show a black background instead*/
	background-color: black;
	margin-bottom:25px;
	
}

#secondary article{
  padding: 0 4px 0 4px;
  float: left;
  border-right: solid 1px #979797;
  border-left: solid 1px #979797;
}


img[alt~=cat] {
  margin: 0 auto 15px;
  display: block;
}

#main > div hgroup {
  padding: 0 0 10px 0;
  margin: 0 0 5px 0;
  background: transparent url(bg-subhead.gif) no-repeat bottom center;
}

#main h1 {
  font-size: 22px;
  margin: 0 0 8px 0;
}

#main > div h2 {
  font-size: 14px;
  text-transform: none;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  text-shadow: none;
  text-align: center;
}


#main > div:first-of-type h1 {
  font-size: 33px;
  padding: 0 0 4px 0;
  letter-spacing: -1px;
  text-align: left;
}

#tertiary article .content {
  -webkit-column-count: 2;
  -webkit-column-width: 117px;
  -webkit-column-gap: 10px;
  -moz-column-count: 2;
  -moz-column-width: 117px;
  -moz-column-gap: 10px;
  column-count: 2;
  column-width: 117px;
  column-gap: 10px;
}


/* advertisements */
aside {
  float: left;
  width: 246px;
}

aside article {
  width: 236px;
  border: 1px solid #cccccc;
  margin-bottom: 5px;
}


#ad2 {
  height: 170px;
  background-image:
    url(bg-bike.png), 
    url(gradient.svg);
  /* Mozilla gradient syntax */
  background-image:
    url(bg-bike.png),
    -moz-linear-gradient(0% 0% 270deg,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* W3C gradient syntax for WebKit */
  background-image:
    url(bg-bike.png),
    -webkit-linear-gradient(top,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* W3C gradient syntax for Opera */
  background-image:
    url(bg-bike.png),
    -o-linear-gradient(top,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* Unprefixed W3C syntax */ 
  background-image:
    url(bg-bike.png),
    linear-gradient(top,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* Old WebKit syntax */
  background-image:
    url(bg-bike.png), 
    -webkit-gradient(linear, 
    from(rgba(0,0,0,0.4)), 
    color-stop(37%, rgba(0,0,0,0)),
    color-stop(83%, rgba(0,0,0,0)), 
    color-stop(92%, rgba(0,0,0,0.16)), 
    color-stop(98%, rgba(0,0,0,0)));

  background-position: 50% 88%, 0 0;
  -webkit-transition: background-position  1s linear 250ms;
  -moz-transition: background-position  1s linear 250ms;
  -o-transition: background-position  1s linear 250ms;
  transition: background-position  1s linear 250ms;
}

#ad2 h1 {
  color: #484848;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px #FFFFFF;
  font-family: LeagueGothic, Arial Narrow, Helvetica, sans-serif;
  font-size: 42px;
  letter-spacing:-1px;
  margin: 20px 5px;    
  text-shadow: #fff 1px 1px;
}

#ad2 a {
  text-decoration: none;
}

.csstransitions #ad2:hover {
  background-position: 150% 88%, 0 0;
}

#ad3 {
  background-image:url(dukes.png);
  background-position: bottom left;
  -webkit-transition: transform  2s linear 250ms;
  -moz-transition: transform  2s linear 250ms;
  -o-transition: transform  2s linear 250ms;
  transition: transform  2s linear 250ms;
}

#ad1 h1 {
  font-family: AcknowledgementMedium;
  letter-spacing: 0.1em;
  font-size: 36px;
  margin: 0 0 0 0;
  text-align: center;
}

#ad1 h1:first-letter {
  letter-spacing: -0.1em;
}

#ad1 p {
  margin: 0;
  font-family: AcknowledgementMedium;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
}

aside p + a { display: block; text-decoration: none; border: 5px double; color: #ffffff; background-color: #484848; text-align: center; font-size: 28px; margin: 5px 5px 9px 5px; padding: 15px 0; position: relative;
 border-radius: 25px;
 -webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
 text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
 font-family: AcknowledgementMedium, sans-serif;
}

.draganddrop #mouseContainer
{
  text-align:center;
}

.no-draganddrop #mouseContainer
{
  visibility:hidden;
  height:0px;
}

#ad1 a.wanted:hover {
  -webkit-box-shadow: 4px 10px #484848;
  -moz-box-shadow: 4px 10px #484848;
  box-shadow: 4px 10px #484848;  
  top: -5px;
  left: -2px;
}

#ad3 h1 {
  font-size: 20px;
  font-family: AcknowledgementMedium;	
  padding: 0 30px 0 75px;
  line-height:1;
  color: #999;
  margin: 0 0 0 15px;
}

#ad3 h1 span {
  font-size: 30px;
  color: #999999;
  display:inline-block;
  -webkit-transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -moz-transition: color 0.2s ease-out, -moz-transform 0.2s ease-out;
  -o-transition: color 0.2s ease-out, -o-transform 0.2s ease-out;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}

#ac5 {
  clear: left;
}

.holding {	
  /* Firefox */
  -moz-transition: all 0.3s ease;
  /* WebKit */
  -webkit-transition: all 0.3s ease;
  /* Opera */
  -o-transition: all 0.3s ease;
  /* Standard */
  transition: all 0.3s ease;
}

#ad3 h1:hover span {
  color: #484848;
  -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); 
  -moz-transform:rotate(10deg) translateX(40px) scale(1.5); 
  -ms-transform:rotate(10deg) translateX(40px) scale(1.5); 
  -o-transform:rotate(10deg) translateX(40px) scale(1.5); 
  transform:rotate(10deg) translateX(40px) scale(1.5);
}

#ad3 p {
  padding: 5px 3px 0 75px;	
  font-size: 0.85em;
}

#ad4 h1 {
  font-size: 20px;
  font-family: AcknowledgementMedium;	
  text-align:center;
}	

#ad4 {
  height:200px;
  position:relative;
}

#formDiv {
  height: 200px;
  width: 236px;
}

#spinner {
  position:absolute;
  top:8px;
  left:55px;
}
	
	
/* Forms */
form {
  border: solid 2px #888;
  border-width: 2px 0;
  clear: both;
  -moz-box-shadow: 
    inset 1px 1px 84px rgba(0,0,0,0.24), 
    inset -1px -1px 84px rgba(0,0,0,0.24);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1')"; /* IE8+ */

  margin: 1px 0 1px 0;
  text-align: center;
  padding: 20px;
  min-height: 300px;
  background: rgba(0,0,0,0.2) url(bg-form.png) no-repeat bottom center;
}

form#emailForm
{
  padding: 0px;
  border:none;
  min-height:0px;
  background:none;
  filter: none;
  -ms-filter:none;
  -moz-box-shadow: none;
}

form ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
form ul li {
  margin-bottom: 40px;
}

label {
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  font-size: 26px;
  display:block;
  margin: auto;
  text-align:center;
}
form p {
  text-align: center;
}
input[type=text], input[type=email], input[type=number], input[type=url], textarea {
  background-color: transparent;
  border: solid #484848;	
  border-width: 1px;
  display:block;
  margin: 10px auto 10px;
  font-style:italic;
  font-family: Times, "Times New Roman", serif;
  padding: 5px 30px 5px 30px;
  width: 50%;
}

input#zipcode {
	width:25%;
	display:inline;
	margin-right: 25px;
}
input[type=number] {
  width: 3em;
}

input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]) {
  background: transparent no-repeat top right;
}

input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):required {
  background-image: url('required.png'); 
}

input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:invalid { 
  background-image: url('invalid.png');
} 
input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:valid { 
  background-image: url('valid.png');
}

:invalid {
  box-shadow: none;
}

::-webkit-input-placeholder { color:#333; }


input {
  font-size: 20px;
  text-align: center;
}

input[type=submit], input[type=button] {
  border: none;
  -moz-border-radius: 10%;
  border-radius: 5px;
  background-color: #333;
  /* SVG for IE9 and Opera */
  background-image: url(button-gradient.svg);
  /* Old WebKit */
  background-image: -webkit-gradient(radial, 30% 120%, 0, 30% 120%, 100, 
    color-stop(0,rgba(144,144,144,1)), 
    color-stop(1,rgba(72,72,72,1)));
  /* W3C for Mozilla */
  background-image: -moz-radial-gradient(30% 120%, circle, 
    rgba(144,144,144,1) 0%, 
    rgba(72,72,72,1) 50%);
  /* W3C for new WebKit */
  background-image: -webkit-radial-gradient(30% 120%, circle, 
    rgba(144,144,144,1) 0%, 
    rgba(72,72,72,1) 50%);
  /* W3C unprefixed */
  background-image: radial-gradient(30% 120%, circle,
    rgba(144,144,144, 1) 0%,
    rgba(72,72,72,1) 50%);
  color: #fff;
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  padding: 5px 5px;
  margin: 3px auto;
  opacity: 0.8;
  -webkit-transition: opacity .25s linear;
  -moz-transition: opacity .25s linear;
 
}



input[type=submit]:hover {
  opacity: 1;
  -webkit-transition: opacity .25s linear;
  -moz-transition: opacity .25s linear;
}
form h1 {
  margin: 0 auto;
  font-size: 50px;
  font-family: AcknowledgementMedium;
  text-align:center;
  white-space:nowrap;
  background: 
    url(bg-formtitle-left.png) left 13px no-repeat, 
    url(bg-formtitle-right.png) right 13px no-repeat;
}
form h2 {
  font-size: 20px;
}

form hgroup {
  padding-bottom: 50px;
}

/* Page Footer */
body > footer,
#footer {
  clear: both;
  float: left;
  width: 758px;
}

body > footer small {
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  text-transform: uppercase;
  line-height: 32px;
  padding: 0 0 0 7px;
  letter-spacing: .08em;
  text-shadow: rgba(0,0,0,0.4) 1px 1px 4px;
  float: left;
}

body > footer p:last-of-type{
  float: right;
  padding: 5px 0 0 0;
}

/* Same rules for IE7-8 */
body footer p {
  float: right;
  padding: 5px 0 0 0;
}

body > footer section {
  float: left;
  
}

body > footer h1 {
  font-size: 200%;
}

#authors {
  padding-top: 10px;
  padding-right: 20px;
  background: #d1d1d1;
  border-top: solid 1px #888;
  border-bottom: solid 1px #888;
}

#authors section {
  width: 226px;
  padding: 0 0 0 20px;
}

#footerinfo {
  clear: both;
  height: 30px;
  width: 100%;
  background: transparent;
}



/* PRINT STYLES */
@media print {
  * { background: transparent !important; color: #484848 !important; text-shadow: none; }
  a, a:visited { color: #484848 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}